<template>
	<scroll-view class="commodit_scr_vie" style="width: 1000px;" scroll-y="true" @scrolltolower='scrolltolowerFun'>
		<view class="commodit_vie">
			<view class="commodit_item " v-for="(item , index) in menuList" :key="index">
				<u-transition mode="fade" :show="true" :duration="1000">
					<!-- <image class="animate__animated animate__pulse spGoods_img" :class="item.notHave?'notHave':''"
						:src="item.url?item.url:'@/static/home/default.png'" mode="" @click="DetailsFun(item,index)">
					</image> -->
					<view :class="item.status == 2?'notHave':''">
						<zero-lazy-load class="animate__animated animate__pulse spGoods_img" :key="item.id"
							borderRadius="24px 24px 0  0" :image="item.url" height="232" @click="DetailsFun(item,index)"></zero-lazy-load>
						<view class="commodityName">
							<text>{{item.showName}}</text>
							<view class="price-c">
								<view class="price-number">{{item.price}}€
									<text class="weight">{{item.showUnit}}</text>
								</view>
								<!-- <commodityNumberInput :value='item'  @change = 'addFun'/> -->
								<NumberInput small ref="NumberInput" :value="item.num" :itemIndex="index" :itemvalue='item'
									@change="cartCountChange($event)" v-on="$listeners" :max="99" />
							</view>
						</view>
					</view>
					<!-- 售空 -->
					<image v-if="item.status == 2" src="../../static/nav/commodity/sellOut.png" class="sellOut" mode="">
					</image>
				</u-transition>
			</view>
		</view>
		<!-- 页面状态 -->
		<status-page :status="pageStatus" :fixed="false" @retry="retry()"></status-page>


		<!-- <u-popup :show="DetailsShow" @close="DetailsShow = false" mode="center">
			<view class="Details_popu animate__animated animate__bounceIn">
				<image src="../../static/nav/soup/closeIcon.png" class="closeIcon" mode="" @click="DetailsShow = false">
				</image>
				<image class="details_img" :src="popuInfo.url" mode=""></image>
				<view class="details_info">
					<text class="title">{{popuInfo.showName}}</text>
					<view class="title_info">{{popuInfo.showIntroduce}}</view>
					<view class="price-c pa-v">
						<view class="price-number">{{popuInfo.price}}€
							<text class="weight">{{popuInfo.showUnit}}</text>
						</view>
						<commodityNumberInput :value='popuInfo' @change = 'addFun'/>
					</view>
				</view>
			</view>
		</u-popup> -->


	</scroll-view>

</template>

<script>
	import NumberInput from '@/components/NumberInput.vue'
	export default {
		name: "commodityView",
		components: {
			NumberInput
		},
		props: {
			menuList: Array
		},
		watch: {
			menuList() {
				if (this.menuList.length === 0) {
					this.pageStatus = 'empty'
				} else {
					this.pageStatus = ''
				}
			}
		},
		data() {
			return {
				pageStatus: '',
				DetailsShow: false,
				popuInfo: {}
			};
		},
		methods: {
			DetailsFun(e, i) {
				// this.bus.$emit('ReduceQuantity',e,i)
				this.bus.$emit('tasteShowFun', true, i)
				// console.log('cartCountChange', this.itemData)
				// this.bus.$emit('ReduceQuantity',this.count,this.itemIndex)
			},
			// 添加菜品
			// addFun(e, i) {
			// 	console.log('cartCountChange')
			// 	this.bus.$emit('tasteShowFun', true, i)
			// },
			scrolltolowerFun() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.commodit_vie {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		padding: 4px 12px;
		flex: 1;
	}

	.commodit_scr_vie {
		height: 93vh;
		display: flex;
		flex: 1;
		position: relative;

	}

	.commodit_item {
		width: 30.5%;
		height: 347px;
		background-color: $qy-bg-nav-option-color;
		border-radius: 20px;
		margin-left: 20px;
		margin-top: 20px;
		position: relative;

		.spGoods_img {
			width: 100%;
			height: 232px;
			border-radius: 24px 24px 0 0;
		}

		.commodityName {
			color: $uni-money-text-color;
			font-size: 22px;
			padding: 16px;
		}



	}

	.notHave {
		opacity: 0.4;
	}

	.sellOut {
		position: absolute;
		top: 0;
		right: 0;
		width: 84px;
		height: 84px;
		opacity: 1;
	}

	.Details_popu {
		width: 65vw;
		height: 340px;
		padding: 20px;
		background-color: $qy-bg-popu-conten-color;
		border-radius: 10px;
		display: flex;
		align-items: center;

		.details_img {
			width: 400px;
			height: 300px;
			// margin-left: 24px;
			border-radius: 20px;
		}

		.details_info {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 300px;
			margin-left: 16px;

			.title {
				font-size: 22px;
				color: $uni-text-color;
			}

			.title_info {
				margin-top: 11px;
				color: $uni-text-color;
				font-size: 16px;
				display: flex;
				flex: 1;
			}
		}
	}

	.price-c {
		margin-top: 14px;
		display: flex;
		font-size: 20px;
		color: $uni-money-text-color;

		.price-number {
			display: flex;
			flex: 1;
		}
	}

	// .pa-v {
	// 	position: absolute;
	// 	bottom: 40px;
	// 	display: flex;
	// }

	.closeIcon {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 17px;
		top: 17px;

	}

	.weight {
		margin-left: 11px;
		margin-top: 2px;
		color: $uni-text-color-inverse;
		font-size: 16px;
	}
</style>